import 'package:moonplay/common/common_height.dart';
import 'package:flutter/material.dart';
import 'package:moonplay/common/app_common.dart';

/**
 * 封装appBar
 * title: appBar标题
 * textIcon: 左侧按钮iconfont, 不传则默认为返回箭头
 * widgetTitle: 自定义标题widget
 * imgUrl: 背景图片
 * listActions: 右侧其它按钮
 * backFunl: 返回事件
 * isBackIcon: 是否有左侧返回按钮, 默认为有
 */
commonAppbar(BuildContext context, {String title, Color backgroundColor, int textIcon, Widget widgetTitle, String imgUrl, List<Widget> listActions, bool isBackIcon = true, Function backFunl}) {
  return PreferredSize(
    preferredSize: Size.fromHeight(ScreenUtil().getHeightPx(88)),
    child: Stack(
      children: <Widget>[
        Positioned(
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          child: AppBar(
            titleSpacing: 0,
            elevation: 0,
            backgroundColor: backgroundColor != null ? backgroundColor : Theme.of(context).primaryColorLight,
            leading: isBackIcon ? leftLeading(context, textIcon: textIcon, backFunl: backFunl) : Container(),
            title: widgetTitle != null
            ? widgetTitle
            : Text(
              title,
              style: TextStyle(
                fontSize: ScreenUtil().getSp(AppSize.appHeaderSize),
                color: Theme.of(context).primaryColorDark
              ),
            ),
            centerTitle: true,
            flexibleSpace: imgUrl != null ? Image.asset(imgUrl, fit: BoxFit.fill,) : Container(),
            actions: listActions != null ? listActions : List<Widget>()
          ),
        ),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: CommonStyle.bottomLine(),
        )
      ],
    )
  );
}

/*
  带tabbar的appbar， 如果不指定appbar的高度，则默认为168 (appbar=88 + tabbar=80)
  bottomWidget为传入的tabbar，类型为Widget,示例在最下方：示例一
*/
backAppbarTabbar(BuildContext context, String title, Widget bottomWidget, double headerHeight, {Function backFunl}) {
  return PreferredSize(
    preferredSize: Size.fromHeight(ScreenUtil().getHeightPx(headerHeight != null ? headerHeight : 168)),
    child: AppBar(
      elevation: 0,
      backgroundColor: Theme.of(context).primaryColorLight,
      leading: leftLeading(context, backFunl: backFunl),
      title: Text(
        title,
        style: TextStyle(
          fontSize: ScreenUtil().getSp(AppSize.appHeaderSize),
          color: Theme.of(context).primaryColorDark
        ),
      ),
      centerTitle: true,
      bottom: bottomWidget,
    )
  );
}

commonSwitchAppbar(BuildContext context, {String title, int textIcon, Widget widgetTitle, String imgUrl, List<Widget> listActions, bool isBackIcon = true, Function backFunl}) {
  return PreferredSize(
    preferredSize: Size.fromHeight(ScreenUtil().getHeightPx(88)),
    child: Stack(
      children: <Widget>[
        Positioned(
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          child: AppBar(
            titleSpacing: 0,
            elevation: 0,
            backgroundColor: Colors.transparent,
            leading: isBackIcon ? leftLeading(context, textIcon: textIcon, backFunl: backFunl) : Container(),
            title: widgetTitle != null
            ? widgetTitle
            : Text(
              title,
              style: TextStyle(
                fontSize: ScreenUtil().getSp(AppSize.appHeaderSize),
                color: Theme.of(context).primaryColorDark
              ),
            ),
            centerTitle: true,
            flexibleSpace: imgUrl != null ? Image.asset(imgUrl, fit: BoxFit.fill,) : Container(),
            actions: listActions != null ? listActions : List<Widget>()
          ),
        ),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: CommonStyle.bottomLine(),
        )
      ],
    )
  );
}

leftLeading(BuildContext context, {int textIcon, Function backFunl}) {
  return Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      GestureDetector(
        onTap: (){
          if (backFunl == null) {
            _popThis(context);
          } else {
            backFunl();
          }
        },
        child: Container(
          width: ScreenUtil().getWidthPx(88),
          height: ScreenUtil().getHeightPx(88),
          child: Icon(
            IconData(
              textIcon != null ? textIcon : 0xe632,
              fontFamily: Constants.IconFontFamily,
            ),
            size: ScreenUtil().getSp(AppSize.headerBackSize),
            color: Theme.of(context).primaryColorDark,
          ),
        ),
      )
    ],
  );
}

void _popThis(BuildContext context) {
  if (Navigator.of(context).canPop()) {
    Navigator.of(context).pop();
  }
}

/// 这是一个可以指定SafeArea区域背景色的AppBar
/// PreferredSizeWidget提供指定高度的方法
/// 如果没有约束其高度，则会使用PreferredSizeWidget指定的高度
class CustomAppbar extends StatefulWidget implements PreferredSizeWidget {
  final double contentHeight; //从外部指定高度
  Color navigationBarBackgroundColor; //设置导航栏背景的颜色
  Widget leadingWidget;
  Widget trailingWidget;
  Widget title;
  CustomAppbar({
    @required this.leadingWidget,
    @required this.title,
    this.contentHeight = 44,
    this.navigationBarBackgroundColor = Colors.white,
    this.trailingWidget,
  }) : super();

  @override
  State<StatefulWidget> createState() {
    return _CustomAppbarState();
  }

  @override
  Size get preferredSize => Size.fromHeight(ScreenUtil().getHeightPx(CommonHeight.appBarHeight));
}

/// 这里没有直接用SafeArea，而是用Container包装了一层
/// 因为直接用SafeArea，会把顶部的statusBar区域留出空白
/// 外层Container会填充SafeArea，指定外层Container背景色也会覆盖原来SafeArea的颜色
///     var statusheight = MediaQuery.of(context).padding.top;  获取状态栏高度

class _CustomAppbarState extends State<CustomAppbar> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: widget.navigationBarBackgroundColor,
      child: SafeArea(
        top: true,
        child: Container(
          padding: EdgeInsets.only(left: 0, right: 0),
          decoration: UnderlineTabIndicator(
            borderSide: BorderSide(width: 0.0, color: Colors.transparent),
          ),
          height: widget.contentHeight,
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Positioned(
                left: 0,
                child: Container(
                  padding: const EdgeInsets.only(left: 5),
                  child: widget.leadingWidget,
                ),
              ),
              widget.title,
              Positioned(
                right: 0,
                child: Container(
                  padding: const EdgeInsets.only(right: 0),
                  child: widget.trailingWidget,
                ),
              ),
            ],
          )
        ),
      ),
    );
  }
}

/**
 * 带tabbar的appbar示例：示例一
 * TabContainer(
      height: ScreenUtil().getHeightPx(80),
      color: Colors.white,
      child: Stack(
        // overflow: Overflow.clip,
        children: <Widget>[
          Container(
            width: double.infinity,
            child: TabBar(
              isScrollable: false,
              controller: _tabController,
              indicatorColor: Colours.text_red,
              indicatorPadding: EdgeInsets.only(left: ScreenUtil().getWidthPx(30),right: ScreenUtil().getWidthPx(30)),
              labelColor: Color(AppColors.AppBarColor),
              labelPadding: EdgeInsets.all(0),
              unselectedLabelColor: Colors.black,
              tabs: <Widget>[
                Stack(
                  children: <Widget>[
                    Container(
                      padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
                      height: ScreenUtil().getHeightPx(80),
                      alignment: Alignment.center,
                      child: Text(tabs[0])
                    ),
                    Positioned(
                      child: Container(
                        decoration: BoxDecoration(
                          border: Border.all(
                              width: 2, color: Colors.grey[200]),
                          shape: BoxShape.circle,
                        ),
                        child: Container(
                          decoration: BoxDecoration(
                              color: Colors.red,
                              shape: BoxShape.circle),
                          height: 8,
                          width: 8,
                        ),
                      ),
                      right: 15,
                      top: 4,
                    ),
                  ],
                ),
                EachTab(
                  text: tabs[1],
                ),
                EachTab(
                  text: tabs[2],
                ),
                EachTab(
                  text: tabs[3],
                ),
                EachTab(
                  text: tabs[4],
                ),
              ],
            ),
          ),
        ],
      )
    );
 */